<template>
	<div class="oauth-container">
		<div class="oauth-header">
			<div class="oauth-header-title">
				<div class="oauth-header-title">
					<img class="oauth-header-title-img" src="/favicon.png" />
					<div class="oauth-header-title-text font20">{{ getThemeConfig.globalViceTitle }}</div>
					<div class="oauth-header-title-text font25">OAuth 授权请求</div>
				</div>
			</div>
		</div>
		<div class="oauth-content">
			<div class="oauth-content-main">
				<div class="oauth-content-img" v-if="appInfo.appLogo">
					<img style="height: 65px;" :src="appInfo.appLogo" />
				</div>
				<div class="oauth-content-name">{{ appInfo.appName }}</div>
				<div class="oauth-content-remark">{{ appInfo.remark }}</div>
				<div class="oauth-content-scope">
					<p>此第三方应用请求获得以下权限: </p>
					<ul>
						<li v-for="item in scopeOptions" :key="item.value">
							<el-checkbox v-if="appInfo.scopes.indexOf(item.value) > -1" disabled checked label="">{{item.label}}</el-checkbox>
						</li>
					</ul>
				</div>
				<div class="oauth-content-btn">
					<el-button type="primary" @click="onSubmit">同意授权</el-button>
					<el-button @click="onCancel">拒 绝</el-button>
				</div>
			</div>
		</div>
		<div class="oauth-copyright">
			<div class="oauth-copyright-company mt20 mb5">{{ $t('message.copyright.company') }}</div>
			<div class="oauth-copyright-msg">{{ $t('message.copyright.recordno') }}</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, computed, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { Session } from '/@/utils/storage';
import { useThemeConfig } from '/@/stores/themeConfig';
import { getOauthInfo, getOauthGrant } from '/@/api/oauth/index';

export default {
	name: 'oauth',
	components: { },
	setup() {
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const route = useRoute();
		const state = reactive({
			scopeOptions: [{
				label: '用户信息，包括ID，用户名，昵称，头像、性别',
				value: 'USER',
			},{
				label: '邮箱账号，当前用户绑定的邮箱账号',
				value: 'EMAIL'
			},{
				label: '手机号码，当前用户绑定的手机号码',
				value: 'PHONE'
			},{
				label: '部门信息，当前用户所属部门',
				value: 'DEPT'
			},{
				label: '角色信息，当前用户所属角色',
				value: 'ROLE'
			},{
				label: '职级信息，当前用户所在职位职级',
				value: 'RANK'
			}],
			userInfo: {} as any,
			appInfo: {
				scopes: []
			} as any,
		});
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return themeConfig.value;
		});
		//同意授权
		const onSubmit = () => {
			getOauthGrant({appId: route.query.appId}).then((res: any) => {
				if(res.code === 0){
					if(state.appInfo.callbackUri.indexOf('?') > -1){
						window.location.href = state.appInfo.callbackUri + '&code=' + res.data;
					}else{
						window.location.href = state.appInfo.callbackUri + '?code=' + res.data;
					}
				}
			})
		}
		//拒绝授权
		const onCancel = () => {
			window.location.href = state.appInfo.redirectUri;
		}

		// 页面加载时
		onMounted(async () => {
			Session.set('token', route.query.token);
			const app = await getOauthInfo({appId: route.query.appId}) as any;
			state.appInfo = app.code === 0 ? app.data : {};
		});
		
		return {
			getThemeConfig,
			onSubmit,
			onCancel,
			...toRefs(state),
		};
	},
}
</script>

<style scoped lang="scss">
.oauth-container {
	width: 100%;
	height: 100%;
	position: relative;
	background-size: 100% 100%;
	.oauth-header {
		width: 100%;
		height: 120px;
		background-color: #303643;
		position: relative;
		.oauth-header-title {
			height: 120px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			&-img {
				width: 45px;
				height: 45px;
			}
			&-text {
				padding-left: 15px;
				color: var(--el-color-primary);
			}
		}
	}
	.oauth-content {
		width: 500px;
		padding: 20px 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate3d(0, 0, 0);
		background-color: var(--el-color-white);
		border: 1px solid var(--el-color-primary-light-8);
		border-radius: 4px;
		transition: height 0.2s linear;
		height: 480px;
		overflow: hidden;
		z-index: 1;
		.oauth-content-main {
			margin: 0 auto;
			width: 80%;
			.oauth-content-img {
				height: 65px;
				padding: 0 15px;
				text-align: center;
			}
			.oauth-content-name {
				font-size: 25px;
				line-height: 36px;
				margin: 10px 0;
				padding: 0 15px;
			}
			.oauth-content-remark{
				padding: 0 15px;
				color: var(--el-color-info-light-3);
				text-indent: 2em;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.oauth-content-scope {
				padding: 0 15px;
				p {
					padding-left: 20px;
					line-height: 36px;
				}
				ul {
					list-style: none;
					line-height: 24px;
				}
			}
			.oauth-content-btn{
				margin: 10px 0;
				padding: 0 15px;
			}
		}
	}
	
	.oauth-copyright {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0px;
		text-align: center;
		color: var(--el-color-white);
		font-size: 12px;
		opacity: 0.8;
		width: 100%;
		height: 100px;
		background-color: #303643;
		.oauth-copyright-company {
			white-space: nowrap;
		}
		.oauth-copyright-msg {
			@extend .oauth-copyright-company;
		}
	}
}
</style>